<template>
    <div id="RiskInspection">
        <div class="content">
            <div class="subTitle">风险监管</div>
            <div class="contentList">
                <ul>
                    <li v-for="(item, index) in list" :key="index" @click="contentListClick(item)">
                        <img :src="item.icon" />
                        <p style="text-align: center">{{ item.name }}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import dd from 'gdt-jsapi';
export default {
    name: "RiskInspection",
    data() {
        return {
            list: [],
        }
    },
    methods: {
        //根据省、市、区县、乡镇权限显示防汛防台菜单
        floodPreventionMenu() {
            let nowUserCode = window.localStorage.getItem("citycode");
            if (nowUserCode) {
                if (nowUserCode.substring(0, 12) === "330000000000") {
                    this.list.push({
                        name: '风险发布',
                        icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/6.png',
                        type: '省',
                        isShow: true,
                    }, {
                        name: '风险上报',
                        icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/2.png',
                        isShow: true,
                    })
                } else if (nowUserCode.substring(4, 12) === "00000000" || nowUserCode.substring(6, 12) === "000000") {
                    this.list.push({
                        name: '风险签收与发布',
                        icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/6.png',
                        type: nowUserCode.substring(4, 12) === "00000000"?'市':'区县',
                        isShow: true,
                    }, {
                        name: '风险上报',
                        icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/1wddb.png',
                        isShow: true,
                    })
                } else if (nowUserCode.substring(9, 12) === "000") {
                    this.list.push({
                        name: '风险清单',
                        icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/4.png',
                        type: '乡镇',
                        isShow: true,
                    }, {
                        name: '风险待处置',
                        icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/1wddb.png',
                        isShow: true,
                    }, {
                        name: '风险已处置',
                        icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/GNLB/2.png',
                        isShow: true,
                    })
                }
            }
        },
        contentListClick(item) {
            switch (item.name) {
                case '风险发布':
                    this.$router.push({
                        path: '/RiskRelease',
                        query: {
                            name: item.type,
                            title: item.name
                        }
                    })
                    break
                case '风险签收与发布':
                    this.$router.push({
                        path: '/RiskRelease',
                        query: {
                            name: item.type,
                            title: item.name
                        }
                    })
                    break
                case '风险清单':
                    this.$router.push({
                        path: '/RiskRelease',
                        query: {
                            name: item.type,
                            title: item.name
                        }
                    })
                    break
                case '风险待处置':
                    this.$router.push({
                        path: '/BusinessProcess',
                        query: {
                            name: "待处置"
                        }
                    })
                    break
                case '风险已处置':
                    this.$router.push({
                        path: '/BusinessProcess',
                        query: {
                            name: "已处置"
                        }
                    })
                    break
                case '风险上报':
                    this.$router.push({
                        path: '/ReportedList',
                    })
                    break
                default:
                    break;
            }
        },
    },
    mounted() {
        dd.ready(() => {
            dd.setTitle({
                title: '风险监控',
            }).then((res) => {

            }).catch((err) => {
                console.error(err)
            })
        })
        this.floodPreventionMenu()
    }
};
</script>

<style scoped lang="scss">
#RiskInspection {
    height: 100vh;
    background: rgb(244, 244, 244);
    font-size: 20px;
    overflow: auto;

    .title {
        width: 100%;
        height: 50px;
        background: #007aff;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
        font-size: 20px;
    }

    .content {
        background: #ffffff;
        padding: 10px 10px 0 10px;
        margin-bottom: 10px;
        height: auto;
        position: relative;
        overflow: hidden;
    }

    .subTitle {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #d2d2d2;
    }

    .contentList {
        padding-top: 10px;
        clear: both;
        overflow: hidden;
    }

    .contentList ul li {
        width: 25%;
        height: 120px;
        float: left;
        font-size: 16px;
        text-align: center;
        position: relative;

        // margin-bottom: 10px;
        .angle-mark {
            min-width: 26px;
            height: 26px;
            background: #ff0000;
            border-radius: 50%;
            display: inline-block;
            line-height: 26px;
            text-align: center;
            position: absolute;
            right: 0;
            top: -6px;
            color: #ffffff;
        }
    }
}
</style>
